<script setup>
import { ref, computed } from 'vue'
import { Head, useForm, router, Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { 
    ArrowLeftIcon,
    CheckCircleIcon,
    ExclamationCircleIcon,
    ArrowPathIcon
} from '@heroicons/vue/24/outline'
import { useToast } from '@/Composables/useToast'

const toast = useToast()

const form = useForm({
    name: '',
    email: '',
    password: '',
    password_confirmation: '',
})

// 提交表单
const submit = () => {
    form.post(route('admin.users.store'), {
        preserveScroll: true,
        onSuccess: () => {
            toast.success('用户创建成功！')
        },
        onError: (errors) => {
            console.error('表单错误：', errors)
            if (errors.error) {
                toast.error(errors.error)
            } else {
                toast.error('保存失败，请检查表单信息')
            }
        }
    })
}

// 返回列表
const goBack = () => {
    router.visit(route('admin.users.index'))
}

// 是否有错误
const hasErrors = computed(() => {
    return Object.keys(form.errors).length > 0
})
</script>

<template>
    <AdminLayout>
        <Head title="新建用户" />

        <div class="space-y-6">
            <!-- 页面头部 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-x-4">
                    <button
                        type="button"
                        @click="goBack"
                        class="inline-flex items-center rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors"
                    >
                        <ArrowLeftIcon class="h-5 w-5" />
                        <span class="sr-only">返回</span>
                    </button>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">新建用户</h1>
                        <p class="mt-2 text-sm text-gray-600">创建新用户账户</p>
                    </div>
                </div>
                <button
                    type="button"
                    @click="submit"
                    :disabled="form.processing"
                    class="inline-flex items-center gap-x-2 rounded-md bg-orange-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                    <ArrowPathIcon
                        v-if="form.processing"
                        class="h-5 w-5 animate-spin"
                    />
                    <CheckCircleIcon
                        v-else
                        class="h-5 w-5"
                    />
                    {{ form.processing ? '创建中...' : '创建用户' }}
                </button>
            </div>

            <!-- 错误提示 -->
            <div
                v-if="hasErrors"
                class="rounded-md bg-red-50 border border-red-200 p-4"
            >
                <div class="flex">
                    <div class="flex-shrink-0">
                        <ExclamationCircleIcon class="h-5 w-5 text-red-400" />
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">表单验证失败</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc list-inside space-y-1">
                                <li v-for="(error, field) in form.errors" :key="field">
                                    {{ error }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表单内容 -->
            <form @submit.prevent="submit" class="space-y-8">
                <!-- 基本信息 -->
                <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">基本信息</h2>
                        <p class="mt-1 text-sm text-gray-600">填写用户的基本信息</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- 用户名 -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-900 mb-2">
                                用户名 <span class="text-red-500">*</span>
                            </label>
                            <input
                                v-model="form.name"
                                type="text"
                                id="name"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': form.errors.name }"
                                placeholder="输入用户名..."
                            >
                            <p v-if="form.errors.name" class="mt-2 text-sm text-red-600 flex items-center gap-x-1">
                                <ExclamationCircleIcon class="h-4 w-4" />
                                {{ form.errors.name }}
                            </p>
                        </div>

                        <!-- 邮箱 -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-900 mb-2">
                                邮箱 <span class="text-red-500">*</span>
                            </label>
                            <input
                                v-model="form.email"
                                type="email"
                                id="email"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': form.errors.email }"
                                placeholder="输入邮箱地址..."
                            >
                            <p v-if="form.errors.email" class="mt-2 text-sm text-red-600 flex items-center gap-x-1">
                                <ExclamationCircleIcon class="h-4 w-4" />
                                {{ form.errors.email }}
                            </p>
                        </div>

                        <!-- 密码 -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-900 mb-2">
                                密码 <span class="text-red-500">*</span>
                            </label>
                            <input
                                v-model="form.password"
                                type="password"
                                id="password"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': form.errors.password }"
                                placeholder="输入密码（至少8位）..."
                            >
                            <p v-if="form.errors.password" class="mt-2 text-sm text-red-600 flex items-center gap-x-1">
                                <ExclamationCircleIcon class="h-4 w-4" />
                                {{ form.errors.password }}
                            </p>
                        </div>

                        <!-- 确认密码 -->
                        <div>
                            <label for="password_confirmation" class="block text-sm font-medium text-gray-900 mb-2">
                                确认密码 <span class="text-red-500">*</span>
                            </label>
                            <input
                                v-model="form.password_confirmation"
                                type="password"
                                id="password_confirmation"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
                                :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': form.errors.password_confirmation }"
                                placeholder="再次输入密码..."
                            >
                            <p v-if="form.errors.password_confirmation" class="mt-2 text-sm text-red-600 flex items-center gap-x-1">
                                <ExclamationCircleIcon class="h-4 w-4" />
                                {{ form.errors.password_confirmation }}
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>

